import { t } from 'i18next'
import React, { useEffect, useMemo, useState } from 'react'
import { Button, Modal, Space } from '@kedacom/react-next'
import { StyledVirtualRoomDetailFooter, VirtualRoomDetailWrap } from './style'
import { fetchGetVirtualRoom } from '@/api/sysConfig/virtualRoomConfig'
import { IVirtualRoomItem } from '@/api/sysConfig/virtualRoomConfig/interface'
import { getBiterateText, getSfuBiterateText, transVirtualRoomDetail } from '../sysConfig/virtualRoomConfig/translator'
import { useGlobalStore } from '@/store/global'

export interface VirtualRoomDetailModalProps {
	isShow: boolean
	setIsShow: (val: boolean) => void
	moid: string
	onStart: () => void
}
/*
组件的使用

<VirtualRoomDetailModal
	isShow={isDetailModalShow}
	setIsShow={setIsDetailModalShow}
	moid={curData?.id ?? ''}
	onStart={() => {
		setIsConfModalShow(true)
	}}
/>
*/
export default function VirtualRoomDetailModal(props: VirtualRoomDetailModalProps) {
	/*
	props传递进来的数据
	*/
	const { isShow, setIsShow, moid, onStart } = props
	/*
	orgData 通过props传递进来的props的moid接口请求的详情数据
	*/
	const [orgData, setOrgData] = useState<IVirtualRoomItem | null>(null)
	/*
	useMemo 计算属性
	transVirtualRoomDetail 对接口返回的数据进行转换
	*/
	const data = useMemo(() => transVirtualRoomDetail(orgData), [orgData])
	const user = useGlobalStore((state) => state.user)
	useEffect(() => {
		if (isShow && moid) {
			fetchGetVirtualRoom(moid).then((res) => {
				if (res.success) {
					setOrgData(res)
				}
			})
		}
	}, [isShow, moid])
	return (
		<Modal
			className="virtual-room-detail-modal"
			title={t('虚拟会议室详情')}
			width={552}
			height={474}
			open={isShow}
			footer={
				<StyledVirtualRoomDetailFooter className="footer">
					<Space>
						{(user?.enable_cms_approval === 1 || user?.cms_virtual_approval === 0) && (
							<Button onClick={onStart}>{t('立即召开')}</Button>
						)}
						<Button onClick={() => setIsShow(false)}>{t('关闭')}</Button>
					</Space>
				</StyledVirtualRoomDetailFooter>
			}
			onCancel={() => {
				setIsShow(false)
			}}
		>
			<VirtualRoomDetailWrap>
				<div className="line-wrap">
					<div className="label" title={t('会议室名称')}>
						{t('会议室名称')}
					</div>
					<div className="value">{data.name}</div>
				</div>
				<div className="line-wrap">
					<div className="label" title={t('会议规模')}>
						{t('会议规模')}
					</div>
					<div className="value">{data.mtType}</div>
				</div>
				<div className="line-wrap">
					<div className="label" title={t('虚拟会议室号码')}>
						{t('虚拟会议室号码')}
					</div>
					<div className="value">{data.vmrE164}</div>
				</div>
				<div className="line-wrap">
					<div className="label" title={t('会议码率')}>
						{t('会议码率')}
					</div>
					{orgData && (
						<div className="value">
							{orgData.conf_type === 2
								? getSfuBiterateText(orgData.video_formats[0])
								: getBiterateText(orgData.video_formats[0])}
						</div>
					)}
				</div>
				<div className="line-wrap">
					<div className="label" title={t('会议类型')}>
						{t('会议类型')}
					</div>
					<div className="value">{data.meetingType}</div>
				</div>
				<div className="line-wrap">
					<div className="label" title={t('媒体能力')}>
						{t('媒体能力')}
					</div>
					<div className="value">{data.isH265}</div>
				</div>
				<div className="line-wrap">
					<div className="label" title={t('数据加密')}>
						{t('数据加密')}
					</div>
					<div className="value">
						{data.encryptionType}
						<div>
							{orgData?.encrypted_type === 4 && (
								<span>{t('只允许硬件终端加入国密会议(使用SM1算法)')}</span>
							)}
							{orgData?.encrypted_auth === 1 && <span>{t('启用终端强认证')}</span>}
						</div>
					</div>
				</div>
				<div className="line-wrap">
					<div className="label" title={t('来宾会议室')}>
						{t('来宾会议室')}
					</div>
					<div className="value">{data.publicMeeting}</div>
				</div>
			</VirtualRoomDetailWrap>
		</Modal>
	)
}
